<!doctype html>
<html>
<head>
<title>ShinyTouch/JS</title>
<script>
/* my own fullscreen api thing...
 * and this is WITHOUT support for with keys!
 * gasp *
 */
(function(){
  var fullscreens = [
    ["requestFullscreen","exitFullscreen","fullscreenchange"],
    ["requestFullScreen","cancelFullScreen","fullscreenchange"],
    ["webkitRequestFullScreen","webkitCancelFullScreen","webkitfullscreenchange"],
    ["mozRequestFullScreen","mozCancelFullScreen","mozfullscreenchange"]
  ],
    correctFullscreen=null,
    inFullscreen=false,
    fullscreenOpenStack=[],
    fullscreenCloseStack=[];
  for (var i=0;i<fullscreens.length;i++) {
    if (document[fullscreens[i][1]]) {
      correctFullscreen=fullscreens[i];
      break;
    }
  }
  if (correctFullscreen) {
    window.addEventListener(correctFullscreen[2],function(){
      if (inFullscreen) {
        inFullscreen=false;
        try {
          while(fullscreenCloseStack.length) fullscreenCloseStack.shift().call(window);
        } catch(e) {};
        // we just exited fullscreen - do something
      }
      else {
        inFullscreen=true;
        try {
          while(fullscreenOpenStack.length) fullscreenOpenStack.shift().call(window);
        } catch(e) {};
        // we just entered fullscreen - do something
      }
    },false);
  }
  else {
    // fullscreen's not supported - do something
    alert("Oh no, no fullscreen support!");
  }
  window.toggleFullscreen=function(el,onfullscreen,onunfullscreen) {
    console.log("Called toggleFullscreen()");
    if (inFullscreen&&correctFullscreen) { //exit
      document[correctFullscreen[1]]();
    }
    else if (correctFullscreen) { //enter
      fullscreenOpenStack.push(onfullscreen);
      fullscreenCloseStack.push(onunfullscreen);
      (el || document.documentElement)[correctFullscreen[0]]();
    }
    else {
      alert("Fullscreen not supported!");
    }
  }
})();

function calibrate() {
  var canvas = document.createElement("canvas");
  canvas.width = screen.width;
  canvas.height = screen.height;
  canvas.style.display="none";
  
  var ctx = canvas.getContext("2d");
  //ctx.fillStyle="#000000";
  //ctx.fillRect(0,0,canvas.width,canvas.height);

  document.body.appendChild(canvas);
  toggleFullscreen(canvas,function(){console.log("yay");
      canvas.style.display="block";
      var ctx = canvas.getContext("2d");
      ctx.strokeStyle="#000000";
      ctx.font="36pt sans-serif";
      ctx.strokeText("Please close all dialogs, and press any key to continue.",100,100);

      window.onkeypress = function(){ window.onkeypress=null; beginCalibrate(canvas); };

    },
    function(){console.log("nyan");
      canvas.style.display="none";
    });
  // hmph.

  
}
function paintCanvas(canvas,color,textX,textY) {
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = color;
  ctx.fillRect(0,0,canvas.width,canvas.height);
  
  var hex = 16777215 - parseInt(ctx.fillStyle.substring(1),16); //invert :)
  hex = hex.toString(16);
  while (hex.length<6) hex = "0"+hex;
  ctx.strokeStyle = "#" + hex;
  //ctx.strokeStyle = "#000000";
  ctx.font="12pt sans-serif";

  if(textX<0) textX=canvas.width+textX;
  if(textY<0) textY=canvas.height+textY;
  ctx.strokeText("Calibrating, please wait...",textX,textY);
}
function beginCalibrate(canvas) {
      var calibrations = [
        //["white",50,50],
        //["blue",-200,50],
        //["red",50,-50],
        //["green",-200,-50]
        ["#FFFFFF",50,50],
        ["#FF0000",50,50],
        ["#00FF00",50,50],
        ["#0000FF",50,50]
      ];

      //paintCanvas(canvas,"orange");
      const CALIB_TIME = 1800;
      const DELAY_TIME = 600;

      calibrations.forEach(function(item,i) {
        setTimeout(function(){
          paintCanvas(canvas,item[0],item[1],item[2]);
          var time = +new Date();

          function calibrateSnapshot() {
            window.opener.calibrateSnapshot(i,CALIB_TIME-(new Date()-time));
          }

          setTimeout(calibrateSnapshot,DELAY_TIME+CALIB_TIME/3);
          setTimeout(calibrateSnapshot,DELAY_TIME+CALIB_TIME*2/3);
        },CALIB_TIME*i);
      });
      setTimeout(function(){
        toggleFullscreen();
        window.opener.processCalibration(calibrations);
      },DELAY_TIME+CALIB_TIME*(calibrations.length));
}
</script>
<style>
canvas {
  cursor:none;
}
</style>
</head>
<body>
<h2>Drag me to the monitor you're pointing the camera at.</h2>
<button onclick="calibrate()">I'm ready! Calibrate.</button>
<br /><br />
During the calibration, DO NOT MOVE ANYTHING in front of the camera! Please?
</body>
</html>